<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>锚点与内容动画向上显示效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0px;
        }
        
        @-webkit-keyframes slideupin {
            0% {
                -webkit-transform: translateY(100%);
            }
            100% {
                -webkit-transform: translateY(0%);
            }
        }
        
        @keyframes slideupin {
            0% {
                transform: translateY(100%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        
        .list {
            width: 100%;
            height: 1000px;
            background: #ddd;
            font-size: 80px;
        }
        
        .link {
            position: fixed;
            top: 0;
            right: 0px;
        }
        
        .list:target {
            -webkit-transform: translateY(0%);
            transform: translateY(0%);
            -webkit-animation: slideupin .35s .05s linear forwards;
            animation: slideupin .35s .05s linear forwards;
        }
    </style>
</head>

<body>

    <div class="list" id="one">1</div>
    <div class="list" id="two">2</div>
    <div class="list" id="three">3</div>
    <div class="list" id="four">4</div>

    <div class="link">
        <a href="#one">1</a>
        <a href="#two">2</a>
        <a href="#three">3</a>
        <a href="#four">4</a>
    </div>
</body>

</html>